<template>
	<view class="page-all">
		<Header title="创建检查" bgColor="#fff" :leftIconSize="20"></Header>
		<view class="radius-contain">
			<uv-form labelPosition="left" :model="form" ref="rForm" :rules="rules" >
				<uv-form-item  prop="school" borderBottom @click="toSelectSchool">
					 <template #label>
						<div class="requireStar">选择学校</div>
					</template>
					<uv-input v-model="form.school" border="none" inputAlign="right" disabled="true" disabledColor="#fff" placeholderClass="placeholder-color" placeholder="请选择检查学校" ></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item prop="canteen" borderBottom @click="showCanteenPicker">
					<template #label>
						<div class="requireStar">选择食堂</div>
					</template>
					<uv-picker ref="canteenPicker"  :columns="canteenColumns" @confirm="canteenConfirm"></uv-picker>
					<uv-input v-model="form.canteen" border="none" inputAlign="right" disabled="true" disabledColor="#fff" placeholderClass="placeholder-color" placeholder="根据已选检查学校回显"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="" prop="index" borderBottom @click="toSelectIndex">
					<template #label>
						<div class="requireStar">选择指标</div>
					</template>
					<uv-input v-model="form.index" border="none" inputAlign="right" disabled="true" disabledColor="#fff" placeholderClass="placeholder-color" placeholder="请选择检查指标"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
			</uv-form>
		</view>
		<view class="check-bottom-box" @click.stop>
		  <button class="sure-button" @click.stop="submit()">确认</button>
		</view>
	</view> 
</template>

<script setup>
	import {ref,reactive} from 'vue'

	import {
	  onLaunch,
	  onShow,
	  onHide, onReady, onLoad,
	} from '@dcloudio/uni-app'
	
	let rules={
			'school': {
				type: 'string',
				required: true,
				message: '请选择学校',
				trigger: ['blur', 'change']
			},
			'canteen': {
				type: 'string',
				required: true,
				message: '请选择食堂',
				trigger: ['blur', 'change']
			},
			'index': {
				type: 'string',
				required: true,
				message: '请选择指标',
				trigger: ['blur', 'change']
			},
		}
	let form = reactive({})
	let rForm = ref()
	let canteenPicker = ref()
	let canteenColumns = ref([
					['长春市第二实验中学 第一食堂', '长春市第二实验中学第二食堂', '长春市第二实验中学第三食堂']
				])
	
	onShow(()=>{
		//接收选择学校传回的数据 data:{id,name}
		uni.$on('schoolData', function(data) {
		  form.school = data[0].name
		})
		//接收选择指标传回的数据  data:{id,name}
		uni.$on('indexData', function(data) {
		  form.index = data[0].name
		})
	})
	
	
	//跳转到选择学校
	function toSelectSchool(){
		uni.navigateTo({
			url:'/packageDailyCheck/pages/createCheck/selectSchool'
		})
	}
	//选择食堂
	function showCanteenPicker(){
		canteenPicker.value.open()
	}
	//跳转选择指标
	function toSelectIndex(){
		uni.navigateTo({
			url:'/packageDailyCheck/pages/createCheck/selectIndex'
		})
	}
	
	//选择食堂确认
	function canteenConfirm(e){
		form.canteen = e.value[0]
	}
	
	function submit() {
		// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
		rForm.value.validate().then(res => {
			uni.showToast({
				icon: 'success',
				title: '校验通过'
			})
			uni.navigateTo({
				url:'/packageDailyCheck/pages/startCheck/index'
			})
		}).catch(errors => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}
</script>

<style scoped lang="scss">
	::v-deep .placeholder-color{
		color: rgba(0,0,0,0.3);
		font-size: 32rpx;
	}
	::v-deep .requireStar{
		width: 30%;
	}
	::v-deep .requireStar:after {
	    vertical-align: bottom;   //加上星号会上下居中，不加会在上角展示
	    content: ' *';
	    color: rgba(255, 59, 48, 1);
	    font-size: 100%;
	}
</style>